<template>
    <div class="container">
        <Navbars></Navbars>
        <el-row  :gutter="20">
            <el-col :span="18">
                <el-card  class="youxian" style="padding:0 20px">
                    <div slot="header" class="disflex spacebetween align-center"> 
                        <div class="carheader">
                            {{action.toUpperCase()}}
                        </div>
                        <el-button class="btncolor" icon="el-icon-plus" type="primary" @click="handleAdd">创建{{action.toUpperCase()}}</el-button>
                    </div>
                    <!-- drg -->
                    <Drgdiolog v-if="this.action == 'drg'" ref="drg" @getbranlog="getbranlog"></Drgdiolog>
                    <!-- mdc -->
                    <Mdcdiolg v-if="this.action == 'mdc'" ref="mdc"></Mdcdiolg>
                    <!-- mcc -->
                    <Mccdiolg v-if="this.action == 'mcc_cc'" ref="mcc"></Mccdiolg>
                    <!-- adrg -->
                    <Adrgdiolg v-if="this.action == 'adrg'" ref="adrg"></Adrgdiolg>
                    <!-- exclude -->
                    <Exclude v-if="this.action == 'exclude'" ref="exclude"></Exclude>
                    <!-- list -->
                    <List v-if="this.action == 'list'" ref="list"></List>
                    <!-- Group -->
                    <Group v-if="this.action == 'no_group'" ref="group"></Group>
                </el-card>
                
            </el-col>
            <el-col :span="6">
                <el-card class="youxian" style="padding:0 20px">
                    <div slot="header" class="disflex spacebetween flex-end"> 
                        <div class="carheader">
                            最新动态
                        </div>
                        <div class="disflex gengduo">
                            更多记录<i class="el-icon-arrow-right" ></i>
                        </div>
                    </div>
                    <div class="stepsview">
                        <el-steps direction="vertical" :active="1" :space="100">
                            <el-step v-for="(item,index) in brandlog" :key="index">
                                <template slot="icon">
                                    <div class="acticon"></div>
                                </template>
                                <template slot="title">
                                    {{item.name}}
                                </template>
                                <template slot="description">
                                    <div class="actview">{{item.content}}</div>
                                </template>
                                
                            </el-step>
                        </el-steps>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>

import Drgdiolog from './diolog/drg'
import Mdcdiolg from './diolog/mdc'
import Mccdiolg from './diolog/mcc'
import Adrgdiolg from './diolog/adrg'
import Exclude from './diolog/exclude'
import List from './diolog/list'
import Group from './diolog/group'
import {branchlog} from '@/api/version.js'
export default {
    components: { Drgdiolog,Mdcdiolg,Mccdiolg,Adrgdiolg ,Exclude,List,Group},
    data() {
        return {
            action:this.$route.query.action,
            brandlog:[]
        }
    },
    mounted(){
        if(this.action == 'drg'){
            this.$refs.drg.getdrgpage()
        }else if(this.action == 'mdc'){
            this.$refs.mdc.getmdcpage()
        }else if(this.action == 'mcc_cc'){
            this.$refs.mcc.getmccpage()
        }else if(this.action == 'adrg'){
            this.$refs.adrg.getadrgpage()
        }else if(this.action == 'exclude'){
            this.$refs.exclude.getexcludepage()
        }else if(this.action == 'list'){
            this.$refs.list.getlistpage()
        }else if(this.action == 'no_group'){
            this.$refs.group.getgrouppage()
        }
        this.getbranlog()
    },
    methods:{
        getbranlog(projectId){
            let data = {
                projectId: this.$route.query.projectId,
                branchId:this.$route.query.branchId,
                page:1,
                num:7,
                type:this.action
            }
            this.$getFlag().then(obj=>{
                branchlog(data,obj.data).then(res=>{
                    if(res.status==200){
                        this.brandlog = res.list
                    }
                })
            })
        },
        // 弹窗
        handleAdd(){
            if(this.action == 'drg'){
                this.$refs.drg.title="创建DRG"
                this.$refs.drg.aisvisible = true
                this.$refs.drg.addForm = {}
            }else if(this.action == 'mdc'){
                this.$refs.mdc.title="创建MDC"
                this.$refs.mdc.aisvisible = true
                this.$refs.mdc.addForm = {}
            }else if(this.action == 'mcc_cc'){
                this.$refs.mcc.title="创建MCC"
                this.$refs.mcc.aisvisible = true
                this.$refs.mcc.addForm = {}
            }else if(this.action == 'adrg'){
                this.$refs.adrg.getmdcpage()
                this.$refs.adrg.title="创建ADRG"
                this.$refs.adrg.aisvisible = true
                this.$refs.adrg.addForm = {}
            }else if(this.action == 'exclude'){
                this.$refs.exclude.title="创建exclude"
                this.$refs.exclude.aisvisible = true
                this.$refs.exclude.addForm = {}
            }else if(this.action == 'list'){
                this.$refs.list.title="创建"
                this.$refs.list.aisvisible = true
                this.$refs.list.addForm = {}
            }else if(this.action == 'no_group'){
                this.$refs.group.title="创建"
                this.$refs.group.aisvisible = true
                this.$refs.group.addForm = {}
            }
            
        },
    }
}
</script>
<style lang="scss" scoped>

::v-deep .youxian .el-card__header{
    padding: 0 ;
}
::v-deep .youxian .el-card__body{
    padding-left:0 ;
}
.carheader{
    height: 56px;
    line-height: 56px;
    border-bottom:2px solid #6896ee;
    font-weight: 600;
}
.gengduo{
    color: #999;
    font-size: 14px;
    margin-bottom: 10px;
}
.acticon{
    width: 5px;
    height: 5px;
    background-color: #6896ee;
    border-radius: 50%;
}
.actview{
    width: 100%;
    background-color: #edf1fc;
    border-radius: 3px;
    padding:15px 20px
}
.stepsview{
    height: 600px;
}
::v-deep .stepsview .el-step__description{
    padding-right: 0;
}
::v-deep .stepsview .el-step.is-vertical .el-step__head{
    width: 24px;
}
::v-deep .stepsview .is-finish .el-step__icon{
    width: 14px;
    height: 14px;
    background-color: #6896ee;
    border-color: #6896ee;
}
::v-deep .stepsview .is-vertical .el-step__icon{
    width: 14px;
    height: 14px;
    background-color:#d0defc;
    border-color: #d0defc;
}
::v-deep .stepsview .is-wait .el-step__icon{
    width: 14px;
    height: 14px;
    background-color:#d0defc;
    border-color: #d0defc;
}
::v-deep .stepsview .el-step.is-vertical .el-step__line{
    width: 1px;
}
::v-deep .stepsview .el-step.is-vertical .el-step__line{
    left: 6px;
    top:6px
}
</style>